<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="bower_components/vue/dist/vue.js"></script>
	<link rel="stylesheet" href="bower_components/animate.css/animate.css">
	<style>
		#box{
			width:400px;
			margin: 0 auto;
		}
		#div1{
			width:100px;
			height:100px;
			background: red;
		}
	</style>
</head>
<body>
	<div id="box">
		<input type="button" value="按钮" @click="toggle">
		<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
	</div>

	<script>
		new Vue({
			el:'#box',
			data:{
				bSign:true
			},
			methods:{
				toggle(){
					this.bSign=!this.bSign;
				}
			},
			transitions:{ //定义所有动画名称
				bounce:{
					enterClass:'zoomInLeft',
					leaveClass:'zoomOutRight'
				}
			}
		});
	</script>
</body>
</html>